<template>
  <div>
    <div class="swiperContainer">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="swiperItem in swiperList" :key="swiperItem.id">
          <img :src="swiperItem.imgUrl" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <ClassList :classList="recommendClassList" />
    <div
      class="divider_line"
      style="
        height: 0.05rem;
        border-bottom: 0.04rem solid rgb(245, 245, 245);
        background-color: rgb(245, 245, 245);
      "
    ></div>
    <div class="displayArea">
      <div class="area1">
        <img
          class="img1"
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/29b39579739d82269d18f0e7c8f6c9da.jpg?f=webp&w=537&h=762&bg=57524C"
        /><img
          class="img2"
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5b9af94e5c05bb2b4849cbb113eddb9d.jpg?f=webp&w=537&h=378&bg=EBF8FF"
        /><img
          class="img3"
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a12873ff30a6da401d74728878625c37.jpg?f=webp&w=537&h=378&bg=D2EDFF"
        />
        <div
          class="divider_line"
          style="
            height: 0.05rem;
            border-bottom: 0.04rem solid rgb(245, 245, 245);
            background-color: rgb(245, 245, 245);
          "
        ></div>
      </div>
      <ProductClass
        v-for="productClassItem in productClassList"
        :key="productClassItem.id"
        :title="productClassItem.title"
        :url="productClassItem.imgUrl"
        @touchstart.native="toTabsStart"
        @touchend.native="toTabsEnd(productClassItem.id)"
      >
        <div class="phoneDetailContainer" v-if="productClassItem.id == 1">
          <div class="displayArea">
            <div
              class="phoneItem"
              v-for="phoneItem in phoneDetailList"
              :key="phoneItem.product_id"
              @touchstart="handlerTouchStart"
              @touchend="handlerTouchEnd(phoneItem.product_id)"
            >
              <img :src="phoneItem.image_url" />
              <div class="textArea">
                <i>{{ phoneItem.name }}</i>
                <strong class="price">¥{{ phoneItem.market_price }}</strong>
                <div class="immediately">立即购买</div>
              </div>
            </div>
          </div>
        </div>
      </ProductClass>
      <div class="area3">
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4c4a11536a720ee0f1b516e53e4d868.jpg?f=webp&w=1080&h=420&bg=873FFA"
        />
        <img
          src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/bbb5bac8089d890338b5bf8ff742cbbc.png"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {
  reqHomeSwiperList,
  reqHomeClassList,
  reqProductClassList,
  reqPhoneDetailList,
} from "@/api";
import ClassList from "./ClassList";
import ProductClass from "./ProductClass";
export default {
  name: "Recommend",
  data() {
    return {
      swiperList: [],
      productClassList: [],
      recommendClassList: [],
      phoneDetailList: [],
    };
  },
  components: { ClassList, ProductClass },
  methods: {
    async getSwiperListData() {
      let result = await reqHomeSwiperList();
      this.swiperList = result.banner.banner;
    },
    async getProductClassListData() {
      let result = await reqProductClassList();
      this.productClassList = result.data;
    },
    async getClassListData() {
      let result = await reqHomeClassList();
      this.recommendClassList = result.classList.ClassList;
    },
    async getPhoneDetailListData() {
      let result = await reqPhoneDetailList();
      this.phoneDetailList = result.detail.data.hotParts.parts;
    },
    handlerTouchStart() {
      this.handlerTouchEnd();
    },
    handlerTouchEnd(productId) {
      this.$router.push({ path: `/detail/${productId}` });
    },
    toTabsStart() {
      this.toTabsEnd();
    },
    toTabsEnd(id) {
      //这个id是分类大图的id
      if (id == 2) {
        this.$emit("toTabsPage", "电视");
        console.log("id3");
      } else if (id == 3) {
        this.$emit("toTabsPage", "笔记本");
        console.log("id5");
      } else if (id == 4) {
        this.$emit("toTabsPage", "家电");
      } else if (id == 5) {
        this.$emit("toTabsPage", "智能");
      }
    },
  },
  mounted() {
    this.getSwiperListData();
    this.getClassListData();
    this.getProductClassListData();
    this.getPhoneDetailListData();
  },
};
</script>

<style scoped lang="less">
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  width: 3.75rem;
  height: 1.875rem;
  img {
    width: 100%;
    height: 100%;
  }
}
/deep/ .my-swipe .van-swipe__indicators .van-swipe__indicator {
  width: 0.08rem;
  height: 0.08rem;
}

.displayArea {
  width: 3.75rem;
  .img1 {
    float: left;
    width: 50%;
  }
  .img2 {
    float: right;
    width: 50%;
  }
  .img3 {
    float: right;
    width: 50%;
    margin-top: 0.02rem;
  }
  .area3 img {
    width: 3.75rem;
  }
  .phoneDetailContainer {
    .displayArea {
      width: 3.75rem;
      display: flex;
      justify-content: space-evenly;
      flex-wrap: wrap;
      .phoneItem {
        width: 47%;
        margin: 0.05rem 0;
        img {
          width: 1.76rem;
          height: 1.45rem;
          border-radius: 0.04rem;
          display: block;
        }
        .textArea {
          width: 1.76rem;
          font-size: 0.12rem;
          box-sizing: border-box;
          padding: 0.04rem 0.04rem;
          background-color: #fff;
          border-radius: 0 0 0.03rem 0.04rem;
          i {
            font-weight: 700;
            color: #3c3c3c;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            display: block;
            text-overflow: ellipsis;
          }
          // span {
          //   color: #3c3c3c;
          //   white-space: nowrap;
          //   overflow: hidden;
          //   display: block;
          //   text-overflow: ellipsis;
          //   margin: 0.03rem 0;
          // }
          strong {
            color: rgb(245, 75, 75);
            font-weight: 700;
            font-size: 0.15rem;
            display: block;
            width: 100%;
            text-align: center;
          }
          .immediately {
            background-color: #f54b4b;
            color: #fff;
            margin: 0 0.4rem 0.1rem 0.4rem;
            width: 0.91rem;
            height: 0.25rem;
            line-height: 0.25rem;
            text-align: center;
            border-radius: 0.03rem;
          }
        }
      }
    }
  }
}
.divider_line {
  clear: both;
}
</style>